<%@ page language="java" import="java.util.*,com.icss.ah.base.util.ResourceLoader" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String proDesc = ResourceLoader.getInstance("icss").getString("proDesc");
%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE HTML>
<html>
  <head>
  	<meta http-equiv="X-UA-Compatible" content="IE=8">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta content="B2B电商平台" name="description"/>
	<meta content="B2B电商平台" name="keyword"/>
	
	<title>B2B电商平台.店铺商品类型维护</title>
	<link rel="icon" href="include/images/icss.ico" type="image/x-icon" />
	<link rel="shortcut icon" href="include/images/icss.ico" type="image/x-icon" />
	<link rel="stylesheet" href="<%=path%>/include/JQuery zTree v3.4/css/demo.css">
	<link rel="stylesheet" href="<%=path%>/include/JQuery zTree v3.4/css/zTreeStyle/zTreeStyle.css">
	<link rel="stylesheet" type="text/css" href="<%=path %>/include/css/global.css" />
	<link rel="stylesheet" type="text/css" href="<%=path %>/include/css/style.css" />
	
	<script type="text/javascript" src="<%=path %>/include/js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="<%=path %>/include/js/cookies.js"></script>
	    <script type="text/javascript" src="<%=path%>/include/JQuery zTree v3.4/js/jquery.ztree.core-3.4.js"></script>
	<script type="text/javascript" src="<%=path%>/include/JQuery zTree v3.4/js/jquery.ztree.excheck-3.4.js"></script>
	<script type="text/javascript" src="<%=path %>/include/js/icss.busin.js"></script>
	<script type="text/javascript" src="<%=path %>/include/js/icss.common.js"></script>
	
	<script type="text/javascript" charset="utf-8" src="<%=path%>/include/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="<%=path%>/include/ueditor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="<%=path%>/include/ueditor/lang/zh-cn/zh-cn.js"></script>
    
    <link rel="stylesheet" href="<%=path%>/include/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="<%=path %>/include/layui/lay/dest/layui.all.js" charset="utf-8"></script>
	
	<style type="text/css">
		body{background:#ebebeb;font-size: 14px;padding: 0px;}
		.title_div{
			height: 81px;
			padding-top: 20px;
			text-align: center;
			//border-bottom: 3px solid #e0e0e0;
			background: #fff;
		}
		.titleCss{
			height: 65px;
			width: 790px;
			margin: 0 auto;
			background: url('<%=path %>/images/postTrade/post_trade_one.png') no-repeat 0 0;
		}
		.title_2{
			background-position: 0 -200px;
		}
		.mainDiv{
			margin: 10px auto;
		}
		.nextDiv button{
		    font: 20px "Microsoft YaHei", "SimHei ";
	    	line-height: 63px;
    		width: 203px;
			background: url('<%=path %>/images/postTrade/pic-global.png') no-repeat -148px -558px;
			color: #fff;
		}
	    .subDiv{
	    	padding: 60px 0px;
	    	background:#fff;
	    	height: 63px;
	    	text-align: center;
	    }
	    .nextDiv{
	    	height: 100%;
	    	margin: 0px auto;
	    }
	    .main_div1{
	    	background:#fff; 
	    	height:48px;
	    	margin: 10px 0px;
	    	border-top: 4px solid #F75D5F;
	    	line-height: 48px;
	    	padding: 0px 10px;
	    }
	    .btCss{
	    	height: 22px;
    		width: 60px;
    		background: url('<%=path %>/images/postTrade/abtnBg.png');
    		float: left;
    		margin: 13px 0 0 20px;
    		font-size: 12px;    
    		line-height: 22px;
    		padding-left: 20px;
    		margin-left: 20px;
	    }
	    a {
		    color: #039;
		    text-decoration: none
	    }
	    ul,li{
	    	list-style: none;
	    }
	    .main_div1 li{
	    	float: left;
	    	font-size: 12px;
	    }
	    .saveDraftCss{
	    	float: right;
	    	border: 1px solid #cfcfcf;
	    	color:#333;
	    	line-height:28px;
	    	margin:10px 0px;
	    	padding: 0px 20px;
	    }
	    .saveDraftCss:hover {
	    	background: #ff8048;
	    	color:#fff;
	    	border: 1px solid #f67943;
	    }
	    .getDraftCss:hover {
	    	color:red;
	    }
	    .divCss_title{
	    	background: #fff;
		    height: 40px;
		    font: 18px/40px "Microsoft YaHei", "SimHei ";
		    text-indent: 10px;
		    border-bottom: 1px solid #d1d1d1;
		    color: #000;
		   
	    }
	    .tipH4{
	    	width:80px;
	    	float:left;
	    	font-weight: bold;
	    	line-height: 18px;
	    }
	    .cdyParaCss ul{
	    	width: 280px;border: 1px solid #c7c7c7;height: 22px;
	    }
	    .cdyParaCss ul li{
	    	display:none;
	    }
	    .cdyParaCss .tdL{
	    	text-align: right;width: 152px;;
	    }
	    .cdyParaCss .tdR{
	    	text-align: left;padding-left: 10px;vertical-align: middle;
	    }
	    .cdyParaCss .tdR div{
	    	width:280px;border: 1px solid #c7c7c7;height: 22px;
	    }
	    .cdyParaCss .tdR input{
	    	border: 0px;padding: 0px 3px;margin-top: -15px;width: 250px;
	    }
	    .cdyParaCss .tdR s,td div s,.addPrice_css{
    	    float: right;
		    width: 21px;
		    height: 22px;
		    background: url('<%=path %>/images/postTrade/pic-global.png') no-repeat -275px -275px;
	    }
	    .cdyParaCss .tdR select{
	    	appearance:none;-moz-appearance:none;-webkit-appearance:none;
	    	width: 282px;margin: 20px 0 0 -257px;position: absolute;overflow: auto;max-height: 200px;
	    }
	    .cdyParaCss .tdR select option{
	    	heigth:20px;padding:5px 3px 0px;
	    }
	    .cdyParaCss .tdR select option:hover{
	    	background: #ebebeb;
	    }
	    .borderCss{
	    	border-top: 1px dashed #ccc;margin: 20px 80px;padding-bottom: 5px;
	    }
	    .div_title_css{
	    	border: 0px;margin: 15px 80px 10px;white-space: nowrap;
	    }
	    .div_title_css table tr td{
	    	width: 16%;
	    }
	    .div_title_css table tr td input{
	    	width: 90%;height: 22px;
	    }
	    .div_title_css p{
	    	color: #999;padding: 10px 0px 10px 83px;white-space: normal;
	    }
	    .radioCss{
	    	margin: 0px;
	    }
	    .line_color_css td{
	    	border-top: 1px solid #c7c7c7;
	    }
	    .td1{
	    	width: 130px;text-align: right;padding-right: 10px;
	    }
	    .addPrice_css{
	    	height: 11px;
		    background-position: -478px -298px;
		    margin-top: 11px;
		    margin-left: 5px;
		    float: left;
	    }
	    .img_css{
	    	padding-right: 10%;float: left;width: 14%;margin-top: 20px;
	    }
	    .add_img_div{
	     	height: 102px;
    		width: 102px;
	    	background: url('<%=path %>/images/postTrade/addIco.png') no-repeat 0px -50px;
	    }
	    td {
	    	vertical-align: middle;
	    }
	</style>
	
	<script type="text/javascript">
		   
	  	$(function(){
	  		_baseVal();
			var main = $(window.parent.document).find("#rightFrame");
			main.height(1300);
		});

	  	function _baseVal(){
			var productId = $("#productId").val();
			var itemCode = $("#itemCode").val();
			$.ajax({
				type:"post",
				url:'<%=path%>/productPublish/queryProductPageInfo.do',
				dataType:"json",
				data:{productId:productId,itemCode:itemCode},
				success:function(data){
					if(data){
						var imgList = data.proPicList;
						_showImg(imgList);
					}
				}
			});
		}

		function _goBackPage(){//返回上一页
			window.location.href = "<%=path %>/productPublish/toProductPublishOnePage.do";
		}
		function _getDraftListPage(){//草稿列表页
			window.location.href = "<%=path %>/productPublish/toProductPublishOnePage.do";
		}
		function _saveDraftInfo(){//草稿列表页
			window.location.href = "<%=path %>/productPublish/toProductPublishOnePage.do";
		}
  	</script>
  </head>
  
  <body>
  	<div id="contentDiv">
  		<input type="hidden" id="itemCode" name="itemCode" value="${pro.categoryCode }">
  		<input type="hidden" id="proStatus" name="proStatus" value="${proStatus }">
  		<input type="hidden" id="codeName" name="codeName">
  		<input type="hidden" id="shopId" name="shopId">
  		<input type="hidden" id="typePCode" name="typePCode">
  		<input type="hidden" id="imgNum" name="imgNum" value="0">
  		<input type="hidden" id="productId" name="productId" value="${productId }">
	   	<div class="title_div">
	   		<div class="titleCss title_2"></div>
	   	<hr color="#ebebeb" height="0.1px" style="margin-top:13px;display: none;"/>
	   	</div>
	   		<div class="main_div1">
	   			<p style="float:left;white-space: nowrap;">
	   				<strong>您选择的类目：</strong>${itemName }
	   				<a style="margin-left:10px" href="#" onclick="_goBackPage()">修改</a>
	   			</p>
	   			<a href="#" class="btCss" style="display: none;">纠错/建议</a>
	   			<ul style="float:right;display: none;">
	   				<li style="width: 190px;line-height: 48px;">
	   					<a href="#" onclick="_getDraftListPage()" class="getDraftCss">查看草稿箱</a>
	   					<a class="saveDraftCss" href="#" onclick="_saveDraftInfo()">保存草稿</a>
	   				</li>
	   			</ul>
	   		</div>
	   		
	   		<div style="margin: 10px 0px;background:#fff;font-size: 12px;padding-bottom: 15px;">
	   			<div class="divCss_title">图片和详细说明</div>
	   			<div class="div_title_css">
	   				<h4 class="tipH4"><span style="color: #f00;">*</span>商品图片：</h4>
	   				<p style="padding-top: 0px;">您可以上传8张图片，大小不可超过2MB，第1张将做为商品主图。</p>
					<p style="padding-top: 0px;">建议上传至少3张以上，不小于500*500像素的真实图片，支持jpg,jpeg,gif,bmp格式。</p>
					<div style="border:1px solid #c7c7c7; height: 250px;width: 95%;margin-left: 83px;">
						<div id="imgDiv" style="padding-left: 30px;padding-top: 10px;">
							<div id="file1" class="site-demo-upbar" style="padding-top: 40px;float: left;">
							    <input type="file" name="file" class="layui-upload-file" id="test">
							</div>
						</div>
					</div>
					<br/>
					<h4 class="tipH4"><span style="color: #f00;">*</span>商品描述：</h4>
					<div style="margin-left: 83px;width: 95%; float: none;">
						<div style="border: 1px solid #c7c7c7;width: 120px;height:23px;color: #039;line-height: 23px;text-align: center;float: left;" onclick="_addInfo()">自动生成简介</div>
						<span style="color: #999;">&nbsp;&nbsp;建议以图文结合的方式，至少插入3张以上宽度不小于700像素的细节图进行描述。不要包含联系方式</span>
					</div>
	   			</div>
		   		<div style="margin: 20px 0px 10px 163px;white-space: normal;">
		   			<input type="hidden" id="postDesc" name="postDesc"/>
		   			<div style="width:95%;">
			   			<script id="editor" type="text/plain" style="width:100%;height:350px;">${pro.proDesc }</script>
		   			</div>
		   			<!-- <iframe src="<%=path %>/pages/postTrade/text.html" width="744px;" height="450px;"></iframe> --> 
		   		</div>
	   		</div>
		   	<div class="mainDiv">
				<div class="subDiv">
					<div class="nextDiv">
						<button onclick="_previousStep()">上一步,基本信息</button>&nbsp;
						<button onclick="_save()">下一步,交易信息</button>
					</div>
				</div>
		   	</div>
  	</div>
  </body>
  	
  	<script type="text/javascript">

  		function _previousStep(){
	  		var productId = $("#productId").val();
	  	 	window.location.href="<%=path %>/productPublish/updateProInfo.do?productId="+productId+"&proStatus=0";
		}
	
		function _change(value){//信息标题长度
			_keyWordLength();
			$("#pId").empty();
			$("#pId").html(value.length+"/60字");
		}
		layui.use('upload', function(){
			  layui.upload({
			    url: '<%=path%>/upload/uploadPic'
			   	//,elem: '#test' //指定原始元素，默认直接查找class="layui-upload-file"
			    //,method: 'post' //上传接口的http类型
			    ,success: function(res){
			      var index = getNewIndex();
					if (index == -1) {
						alert("最多只能上传8个图片");
					} else {
						var html = "<div id='imgDiv"+index+"' class='img_css'>";
							html += "<input type='hidden' id='pic"+index+"' name='pic"+index+"' value='"+res.url+"' />";
							html += "	<img src='"+res.url+"'";
							html += "		id='imgView"+index+"' style='height: 75px; width: 100px;'>";
							html += "	<a href='javascript:delPic("+index+")'>删除</a>";
							html += "</div>";
						$("#file1").before(html);
					}
			    }
			  });
		});
		var iNum = 1;
		function getNewIndex(){
			var objs = $("input[id^=pic]");
			$("#imgNum").val($("#imgNum").val()+","+iNum);
			if(objs.length==7) $("#file1").css("display","none");
			if(objs.length<8)return iNum++; 
			else return -1;
		}
		function delPic(number) {
			$("#imgNum").val($("#imgNum").val().replace(","+number,""));
			$("#imgDiv" + number).remove();
			$("#file1").css("display","");
		}

		function _showImg(imgList){
			var imgNum = $("#imgNum").val();
			iNum = imgList.length;
			for(var i=0;i<imgList.length;i++){
				var img = imgList[i];
				imgNum += ","+i;
				var html = "<div id='imgDiv"+i+"' class='img_css'>";
				html += "<input type='hidden' id='pic"+i+"' name='pic"+i+"' value='"+img.proPic+"' />";
				html += "	<img src='"+img.proPic+"'";
				html += "		id='imgView"+i+"' style='height: 75px; width: 100px;'>";
				html += "	<a href='javascript:delPic("+i+")'>删除</a>";
				html += "</div>";
				$("#file1").before(html);
			}
			if(iNum==8) $("#file1").css("display","none");
			$("#imgNum").val(imgNum);
		}

		function _getShopyType(level,pcode,flag){
			var code = "${pro.typeCode}";
			if(flag=="0"){
				code = "";
				$(".shopType").remove();
			}
			$.ajax({
				type:"post",
				url:"<%=path%>/productPublish/getShopType.do",
				dataType:"json",
				async: false,
				data:{level:level,typePCode:pcode,typeFlag:flag},
				success:function(data){
					if(data){
						var list = data.shopTypeList;
						var html = "";
						if(list.length>0) $("#shopId").val(list[0].shopId);
						if(level=="1"){
							pcode=$("#typePCode").val();
							for(var i=0;i<list.length;i++){
								html += "<option";
								if(pcode==list[i].typeCode) html += " selected=\"selected\"";
								html += " value='"+list[i].typeCode+"'>"+list[i].typeName+"</option>";
							}
						}else{
							for(var i=0;i<list.length;i++){
								if(list[i].typeCode==code){
									$("#typePCode").val(list[i].typePCode);
									html += "<option class='shopType' selected=\"selected\" value='"+list[i].typeCode+"'>"+list[i].typeName+"</option>";
								}else{
									html += "<option class='shopType' value='"+list[i].typeCode+"'>"+list[i].typeName+"</option>";
								}
							}
						}
						$("#type"+level).append(html);
						_reHeight("rightFrame","contentDiv");
					}
				}
			});
		}
		function _changeShopType(val){
			$("#shopTypeCode").val(val);
		}
		function _keyWord(wordList){
			for(var i=0;i<5;){
				var info = wordList[i];
				++i;
				$("#keyWord"+i).val(info.proKey);
			}
		}
		function _proPrice(list){
			for(var i=0;i<list.length;i++){
				$("#tr"+i).css("display","");
				var info = list[i];
				$("#buyNum"+i).val(info.purchaseLow);
				$("#price"+i).val(info.proPrice);
				_previewHtml(i+"",(i-1)+"");
			}
			$("#tr1").css("display","");
		}
		var ue = UE.getEditor('editor');
    	function _addInfo(){
    		 ue.setContent('<%=proDesc%>');
    	} 
    	function _save(){
        	var descHtml = ue.getContent();
        	if(descHtml == null || descHtml == ''){
    			alert("请输入商品描述");
    			return;
    		}
        	$("#postDesc").val(descHtml);
    		var dataStr = {};
 		    var dataArr = $("input").serializeArray();
 		    for (var i = 0; i < dataArr.length; i++) {
 		        dataStr[dataArr[i].name] = dataArr[i].value;
 		    }
 		    var imgNum = $("#imgNum").val();
 		    dataStr["imgNum"]=imgNum;
    		$.ajax({
 	 		    type:"post",
 	 		    url:"<%=path%>/productPublish/saveThr.do",
 	 		    data:dataStr,
 	 		  	dataType:"json",
 	 		    success:function(data){
 	 	 		    if(data){
 	 	 	 		    var flag = data.saveFlag;
 	 	 	 		    var productId = data.productId;
 	 	 	 		    if(flag=="1"){
 	 	 	 		    	var proStatus = $("#proStatus").val();
 	 	 	 		    	if(proStatus=="2"){
 	 	 	 	 		    	var itemName = $("#itemName").val();
 	 	 	 	 		    	var proName = $("#proName").val();
	 	 	 	 	 		    window.location.href="<%=path %>/productPublish/toProductPublishFourPage.do?productId="+productId+"&itemName="+escape(escape(itemName))+"&proName="+escape(escape(proName));
	 	 	 	 		    }else window.location.href="<%=path %>/productPublish/updateProInfo.do?productId="+productId+"&proStatus=2";
 	 	 	 		    }else{
 	 	 	 	 			alert("输入数据不规范，请检查后再保存");
 	 	 	 	 		}
 	 	 		    }
 	 	 		}
 	 		});
   		 	
    	}
	</script>
</html>